<template>
    <div class="car">
        <ul>
            <li v-for="(item,i) in goodslist" :key="item.id">
                <mt-switch class="ss" 
                v-model="$store.getters.getGoodsSelected[item.id]"
                @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
                <img :src="item.img" alt="">
                <h2>{{item.title}}</h2>
                <span class="ge">{{item.price}}</span>
                <p><numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox></p>

                    <!-- 如何从购物车中获取商品的数量呢 -->
                    <!-- 1.我们可以先创建一个空对象，然后循环购物车中所有商品的数据，把当前这条商品的id，作为对象的属性名，count值作为对象的属性值，
                    这样，当把所有的商品循环一遍，就会得到一个对象:{1:2,2:5,3:7} -->

                <a href="" @click.prevent="remove(item.id,i)">删除</a>
            </li>
           
        </ul>
        <div class="jiesaun">
            <span class="jian">已勾选商品<i>{{$store.getters.getGoodsAndmount.count}}</i>件</span>
            <span class="zong">总价：<i>￥{{$store.getters.getGoodsAndmount.amount}}</i></span>
            <el-button type="danger">去结算</el-button>
        </div>
        
    </div>
</template>
<script>
import numbox from "./numbox.vue"
export default {
    
    data() {
      return {
        
        
        
        goodslist:[]
      }
      
    },
    
    created(){
        this.getshopcarlist()
    },
    methods:{
        
             
      
      getshopcarlist(){
          //获取到store中所有的商品id，然后拼接出一个用逗号分隔的字符串
          var idArr = []
          this.$store.state.car.forEach(item=>idArr.push(item.id))

          this.$http.get("/shopcarlist/"+idArr.join(","))
          .then(result=>{
              this.goodslist = result.body.msg
                console.log(result.body);
                
          })
      },
      remove(id,index){
          //点击删除，把商品从store中根据传递的id删除，同时把当前组件中的goodslist里面，对应要删除
          //的那个商品，使用index来删除
          this.goodslist.splice(index,1)
          this.$store.commit("remove",id)
      },
      selectedChanged(id,val){
          this.$store.commit("updateSelected",{id,selected:val})
      }
      
     
    },
    components:{
        numbox
    }
}
</script>
<style lang="scss">
    .car{
        li{
            display: flex;
            align-items: center;
           border: 1px solid #ccc;
           height: 160px;
           width: 900px;
           margin-left: 400px;
           margin-top: 30px;
        }
        .ss{
            margin-left: 10px;
        }
        img{
            height: 120px;
            width: 120px;
            margin-left: 20px;
        }
        h2{
            width: 300px;
            margin-left: 30px;
        }
        .ge{
            display: block;
            width: 50px;
            font-size: 22px;
            color: #f10215;
        }
        a{
            margin-left: 50px;
            text-decoration: none;
            color: #f10215;
        }
        .gou{
            margin-left: 10px;
        }
        .jiesaun{
            height: 80px;
            width: 900px;
            border: 1px solid #ccc;
            margin-left: 480px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            i{
                color: #f10215;
                margin: 0 3px;
            }
        }
        .jian{
            margin-left: 50px;
        }
        .zong{
            margin-left: 50px;
            margin-right: 450px;
        }
        
    }
</style>
